<template>
    <div class="WorkingSchedule" v-loading="loading">
        <el-form ref="form" :model="form" class="myform">
            <el-form-item label="上新年/月" class="myform-item">
                <el-date-picker
                    value-format="yyyy-MM"
                    v-model="form.new_year"
                    type="month"
                    placeholder="选择月"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="款号/款名/套装编号" class="myform-item">
                <el-input v-model="form.title" placeholder="请输入款号/款名/套装编号" @keyup.enter.native="onSearch" clearable></el-input>
            </el-form-item>
            <el-form-item label="品类/设计师/产品负责人" class="myform-item">
                <el-input v-model="form.search" @keyup.enter.native="onSearch" placeholder="请输入品类/设计师/产品负责人" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- <div style="display:flex;align-items: center;margin:20px 0">
            <div style="margin-right:30px">部门：</div>
            <el-checkbox v-model="department.OperationsDepartment" @change="onChangeTable">技术部</el-checkbox>
            <el-checkbox v-model="department.marketing" @change="onChangeTable">营销部</el-checkbox>
            <el-checkbox v-model="department.design" @change="onChangeTable">设计部</el-checkbox>
            <el-checkbox v-model="department.product" @change="onChangeTable">产品部</el-checkbox>
        </div>-->
        <el-table
            :data="tableData"
            style="width: 100%"
            border
            size="mini"
            :header-cell-style="{ background: '#F5F7FA' }"
            :cell-style="changeCellStyle"
            :height="height"
            ref="ElTableHeaderRef"
        >
            <el-table-column label="款式信息" align="center" prop="image" width="300">
                <template slot-scope="{ row }">
                    <div>
                        <div>
                            <el-image
                                :src="row.image[0]"
                                style="width:100px"
                                :preview-src-list="[row.image[0]]"
                            ></el-image>
                        </div>
                        <div>
                            <div>
                                <span>款式名称：{{ row.type_name }}</span>
                            </div>
                            <div>{{ row.type_no }}</div>
                            <div>{{ row.design_classification }}</div>
                            <div>套装编码：{{ row.package_number }}</div>
                            <div
                                :style="{ color: row.status != 0 ? '#2c70d6' : '' }"
                            >状态：{{ row.status == 0 ? "未确认" : row.status == 1 ? "设计已确认" : row.status == 2 ? "技术已确认" : row.status == 3 ? "生产已确认" : "" }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="指数" align="center" prop="dressing_index">
                <template slot-scope="{ row }">
                    <div>
                        <div
                            v-for="(item,index) in row.dressing_index"
                            :key="item"
                        >{{ index == 0 ? "版型指数：" : index == 1 ? "弹力指数：" : index == 2 ? "硬度指数：" : index == 3 ? "厚度指数：" : "" }}{{ item }}</div>
                        <div v-if="row.chanping_status == 0">
                            <el-button type="text" @click="onIndex(row.id)">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column label="版型工艺" align="center" prop="process_version">
                <template slot-scope="{ row }">
                    <div>
                        <div>{{ row.process_version }}</div>

                        <div v-if="row.chanping_status == 0">
                            <el-button
                                type="text"
                                @click="onAllEdit(4, '版型工艺', 'process_version', row.id, row.process_version)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="穿法特色" align="center" prop="threading_characteristics">
                <template slot-scope="{ row }">
                    <div>
                        <div>{{ row.threading_characteristics }}</div>

                        <div v-if="row.chanping_status == 0">
                            <el-button
                                type="text"
                                @click="onAllEdit(4, '穿法特点', 'threading_characteristics', row.id, row.threading_characteristics)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="主要面料特色" align="center" prop="fabric_characteristics">
                <template slot-scope="{ row }">
                    <div>
                        <div>{{ row.fabric_characteristics }}</div>

                        <div v-if="row.chanping_status == 0">
                            <el-button
                                type="text"
                                @click="onAllEdit(4, '主要面料特点', 'fabric_characteristics', row.id, row.fabric_characteristics)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="填充物" align="center" prop="filler" v-if="department.product">
                <template slot-scope="{ row }">
                    <div>
                        <div>{{ row.filler }}</div>

                        <div v-if="row.chanping_status == 0">
                            <el-button
                                type="text"
                                @click="onAllEdit(4, '填充物', 'filler', row.id, row.filler)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="注意事项" align="center" prop="matters_needing_attention">
                <template slot-scope="{ row }">
                    <div>
                        <div>{{ row.matters_needing_attention }}</div>

                        <div v-if="row.chanping_status == 0">
                            <el-button
                                type="text"
                                @click="onAllEdit(4, '注意事项', 'matters_needing_attention', row.id, row.matters_needing_attention)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="工艺细节解说" align="center" prop="process_explanation">
                <template slot-scope="{ row }">
                    <div>
                        <div>{{ row.process_explanation }}</div>

                        <div v-if="row.chanping_status == 0">
                            <el-button
                                type="text"
                                @click="onAllEdit(4, '工艺细节解说', 'process_explanation', row.id, row.process_explanation)"
                            >
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="产品部确认状态" align="center" prop="chanping_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.chanping_status == 1 ? '#2c70d6' : '' }"
                    >{{ row.chanping_status == 0 ? '未确认' : '已确认' }}</div>
                    <div v-if="row.chanping_up_username">确认人：{{ row.chanping_up_username }}</div>
                    <div v-if="row.chanping_up_time">确认时间：{{ row.chanping_up_time }}</div>
                </template>
            </el-table-column>
            <el-table-column
                label="产品部确认"
                align="center"
                prop="chanping_status"
                v-if="department.product"
            >
                <template slot-scope="{ row }">
                    <el-button
                        type="text"
                        @click="onAffirm(4, 0, row.id)"
                        v-if="row.chanping_status == 0"
                    >确认</el-button>
                    <!-- <el-button
                        type="text"
                        @click="onAffirm(4, 1, row.id)"
                        style="color:red"
                        v-if="row.chanping_status == 1"
                    >取消确认</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <!-- <MyTable></MyTable> -->
        <pagination
            :form="form"
            :total="total"
            @paginationPostOrderTaskList="postAdminApiGetnew_products"
        />
        <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
            <div style="display:flex">
                <span>{{ title }}：</span>
                <div style="width:80%">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="text"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onAllAffirm()" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="dialogVisibleImage" width="30%">
            <div style="display:flex">
                <span>主题/纹祥图：</span>
                <div style="width:80%">
                    <el-upload
                        class="avatar-uploader"
                        action="/"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="images" :src="images" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleImage = false">取 消</el-button>
                <el-button type="primary" @click="onAffirmImage" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="dialogVisibleIndex" width="30%">
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>版型指数：</span>
                <div style="width:80%">
                    <el-select v-model="modelvalue" placeholder="请选择">
                        <el-option v-for="item in model" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </div>
            </div>
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>弹力指数：</span>
                <div style="width:80%">
                    <el-select v-model="stretchvalue" placeholder="请选择">
                        <el-option v-for="item in stretch" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </div>
            </div>
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>硬度指数：</span>
                <div style="width:80%">
                    <el-select v-model="hardnessvalue" placeholder="请选择">
                        <el-option v-for="item in hardness" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </div>
            </div>
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>厚度指数：</span>
                <div style="width:80%">
                    <el-select v-model="thicknessvalue" placeholder="请选择">
                        <el-option
                            v-for="item in thickness"
                            :key="item"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleIndex = false">取 消</el-button>
                <el-button type="primary" @click="onConfirmIndex" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { postAdminApiGetnew_products, postAdminApiSetSuitRange, postAdminApiSetMarketingData, postAdminApiSetDesign_Department, postAdminApiSetProduct_department, uploadHomeApiupload, postAdminApiGetNew_products_save } from "@/api";
import pagination from "@/components/pagination.vue";
import MyTable from "@/components/table.vue";
export default {
    components: { pagination, MyTable },
    data() {
        return {
            height: "",
            loading: false,
            dialogVisible: false,   // 编辑输入框
            title: "",// 当前编辑的名字
            text: "",// 编辑的内容
            type: "",// 当前编辑的类型
            key: "",// 当前编辑的KEY
            rowid: "",// 当前编辑的id
            dialogVisibleImage: false,   // 编辑纹祥图
            dialogVisibleIndex: false, // 编辑指数
            images: "",
            file: '',
            department: {
                OperationsDepartment: false,
                design: false,
                product: true,
                marketing: false
            },
            model: [
                '紧身',
                '修身',
                '合体',
                '宽松'
            ],
            modelvalue: "",
            stretch: [
                '无弹',
                '微弹',
                '超弹',
                '透视'
            ],
            stretchvalue: "",
            hardness: [
                '柔软',
                '软',
                '适中',
                '偏硬'
            ],
            hardnessvalue: "",
            thickness: [
                '透视',
                '偏薄',
                '适中',
                '偏厚'
            ],
            thicknessvalue: "",
            tableData: [],
            total: 1,
            form: {
                page: 1,
                size: 10,
                search:"",
                title: "",
                new_year: "",
                new_month: ""
            },
        };
    },
    activated() {
        this.height = document.documentElement.clientHeight - 400
        let form = this.form;
        this.postAdminApiGetnew_products(form);
        this.postAdminApiGetNew_products_save()
    },
    methods: {
        // 获取上新年月
        postAdminApiGetNew_products_save(){
            postAdminApiGetNew_products_save().then(res=>{
                let data = res.data
                this.form.new_year=`${data.new_year}-${data.new_month}`
            })
        },
        changeCellStyle(row, column, rowIndex, columnIndex) {
            if (row.column.property == "component" || row.column.property == "sizelist" || row.column.property == "recommend_size_group" || row.column.property == "yunyin_status") {
                return "background:#FFF6ED"; //修改的样式
            }
            if (row.column.property == "product_description" || row.column.property == "picture_matching" || row.column.property == "component_details" || row.column.property == "page_warm_tips" || row.column.property == "yingxiao_status") {
                return "background:#F5F3FE"; //修改的样式
            }
            if (row.column.property == "design_theme" || row.column.property == "pattern_description" || row.column.property == "theme_sample" || row.column.property == "sheji_status") {
                return "background:#FDFDF9"; //修改的样式
            }
            if (row.column.property == "dressing_index" || row.column.property == "process_version" || row.column.property == "threading_characteristics" || row.column.property == "fabric_characteristics" || row.column.property == "filler" || row.column.property == "matters_needing_attention" || row.column.property == "process_explanation" || row.column.property == "chanping_status") {
                return "background:#F5FBFF"; //修改的样式
            }
        },
        onEditCM(id) {
            this.$router.push({ name: "OnTheNewTableOperatingEdit", query: { id } })
        },
        beforeAvatarUpload(file) {
            this.file = file;
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                let _base64 = reader.result;
                this.images = _base64;
            };
            return false;
        },
        // 编辑	主题文样图
        async onAffirmImage() {
            let obj = {
                id: this.rowid,
                theme_sample: []
            }
            await uploadHomeApiupload(this.file).then((res) => {
                console.log("图片");
                obj.theme_sample.push(res.img);
            });
            await postAdminApiSetDesign_Department(obj).then(res => {
                this.$message.success('编辑成功')
                let form = this.form;
                this.postAdminApiGetnew_products(form);
                this.dialogVisibleImage = false
            })

        },
        // 删除
        onDelete() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 新增指数类别
        onAdd() {
            this.$prompt("", "新增指数类别", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputValidator: (value) => {
                    if (value) return true;
                    return false;
                },
                inputPlaceholder: "请输入指数类别",
                inputErrorMessage: "请输入指数类别",
            })
                .then(({ value }) => {
                    this.$message({
                        type: "success",
                        message: "添加成功",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消输入",
                    });
                });
        },
        // 上新表列表
        async postAdminApiGetnew_products(data) {
            this.loading = true;
            let form = JSON.parse(JSON.stringify(data));
            if (form.new_year) {
                let date = form.new_year.split('-')
                form.new_year = date[0];
                if (date[1] < 10) {
                    date[1] = date[1].substring(date[1].length - 1)
                }
                form.new_month = date[1];
            }
            postAdminApiGetnew_products(form)
                .then((res) => {
                    this.loading = false;
                    console.log("上新表列表", res);
                    this.tableData = res.data;
                    this.total = Number(res.total);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 搜索
        onSearch() {
            this.form.page = 1;
            this.form.size = 10;
            this.postAdminApiGetnew_products(this.form);
        },
        // 单个编辑
        onAllEdit(type, title, key, id, text) {
            this.type = type
            this.title = title
            this.key = key
            this.text = text || ""
            this.rowid = id
            if (key == "theme_sample") return this.dialogVisibleImage = true
            this.dialogVisible = true
        },
        // 单个确认
        onAllAffirm() {
            this.loading = true
            let { title, text, type, key, rowid } = this
            if (text) {
                if (type == 1) {
                    let obj = {
                        id: rowid,
                    }
                    obj[key] = text
                    postAdminApiSetSuitRange(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                        this.dialogVisible = false
                    })
                }
                if (type == 2) {
                    let obj = {
                        id: rowid,
                    }
                    obj[key] = text
                    postAdminApiSetMarketingData(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                        this.dialogVisible = false
                    })
                }
                if (type == 3) {
                    let obj = {
                        id: rowid,
                    }
                    obj[key] = text
                    postAdminApiSetDesign_Department(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                        this.dialogVisible = false
                    })
                }
                if (type == 4) {
                    let obj = {
                        id: rowid,
                    }
                    obj[key] = text
                    postAdminApiSetProduct_department(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                        this.dialogVisible = false
                    })
                }
            } else {
                this.loading = false
            }
        },
        // 部门确认和取消
        onAffirm(type, state, id) {
            let text = ""
            if (state) {
                text = '即将取消确认此款式'
            } else {
                text = '即将确认此款式'
            }
            this.$confirm(text, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log();
                if (type == 1) {
                    let obj = {
                        id
                    }
                    if (state == 0) {
                        obj.yunyin_status = 1
                    } else {
                        obj.yunyin_status = 0
                    }
                    postAdminApiSetSuitRange(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                    })
                }
                if (type == 2) {
                    let obj = {
                        id
                    }
                    if (state == 0) {
                        obj.yingxiao_status = 1
                    } else {
                        obj.yingxiao_status = 0
                    }
                    postAdminApiSetMarketingData(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                    })
                }
                if (type == 3) {
                    let obj = {
                        id
                    }
                    if (state == 0) {
                        obj.sheji_status = 1
                    } else {
                        obj.sheji_status = 0
                    }
                    postAdminApiSetDesign_Department(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                    })
                }
                if (type == 4) {
                    let obj = {
                        id
                    }
                    if (state == 0) {
                        obj.chanping_status = 1
                    } else {
                        obj.chanping_status = 0
                    }
                    postAdminApiSetProduct_department(obj).then(res => {
                        this.$message.success('编辑成功')
                        let form = this.form;
                        this.postAdminApiGetnew_products(form);
                    })
                }
            }).catch((err) => {
                console.log(err);
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 指数
        onIndex(id) {
            this.rowid = id
            this.modelvalue = ""
            this.stretchvalue = ""
            this.hardnessvalue = ""
            this.thicknessvalue = ""
            this.dialogVisibleIndex = true
        },
        // 指数确认
        onConfirmIndex() {

            let { modelvalue, stretchvalue, hardnessvalue, thicknessvalue, rowid } = this
            if (modelvalue && stretchvalue && hardnessvalue && thicknessvalue) {
                this.loading = true
                let obj = {
                    id: rowid,
                }
                obj.dressing_index = [modelvalue, stretchvalue, hardnessvalue, thicknessvalue]
                postAdminApiSetSuitRange(obj).then(res => {
                    this.$message.success('编辑成功')
                    let form = this.form;
                    this.postAdminApiGetnew_products(form);
                    this.dialogVisibleIndex = false
                })
            } else {
                this.$message.warning('选择内容不能为空')
                this.loading = false
            }
        },
        onChangeTable() {
            this.$nextTick(res => {
                this.$refs.ElTableHeaderRef.doLayout()
            })
        }

    },
};
</script>

<style lang="scss" scoped>
.sizelist {
    display: flex;
    > div {
        width: 120px;
    }
}
.myform {
    display: flex;
    // justify-content: space-between;
    > div {
        display: flex;
    }
    &-item {
        margin-right: 10px;
    }
}

.Mytable {
    display: flex;
    > div {
        width: 100px;
        text-align: center;
    }
}
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
    // /deep/ .el-table--scrollable-y {
    //     .el-table__body-wrapper::-webkit-scrollbar {
    //         width: 9px;
    //         height: 9px;
    //     }
    //     .gutter {
    //         width: 10px !important;
    //     }
    // }
}
</style>
